<template>
  <div class="login">
    <div class="wrapper">
      <div class="header clearfix">
        <div class="register-bar"><a @click="$router.push('/reg')">立即注册</a>还没有易创天下账号？</div>
        <div class="logo">
          <a title="易创天下" href=""><img width="200" height="50" title="易创天下" alt="易创天下" src="../image/logo.png">
            <p style="    text-align: center;">易创天下网上商城</p>
          </a> </div>
      </div>

      <form id="J_loginForm" action="javascript:void(0)">
        <div class="login-wrap clearfix">
          <div class="ad-div">
            <div>
              <a href="/"><img width="520" height="350" src="../image/login.jpg" alt=""></a>
            </div>
          </div>
          <div class="login-layer">
            <div class="login-head clearfix">
              <h3 :class="{'curLogin': isStatus == 1 }" @click="isStatus = 1">用户名登录</h3>
              <h3 :class="{'curLogin': isStatus == 2 }" @click="isStatus = 2">手机登录</h3>
            </div>
            <!-- 登录易创天下 -->
            <div class="login-select" v-if="isStatus ==1">
              <div class="login-content">
                <div class="login-wrong-tips" style="display:none;">
                  -
                </div>
                <div class="form-item username">
                  <input type="text" value="" placeholder="手机号/邮箱/用户名" class="text" maxlength="11" v-model="name">
                  </ul>
                </div>
                <div class="form-item">
                  <input type="password" v-model="pwd" placeholder="密码" class="text" maxlength="20">
                  <i class="remove" style="display:none;"></i>
                  <span class="case-tips" id="J_loginCapsLock">大小写锁定已打开<i class="ico"></i></span>
                </div>
                <div class="form-other clearfix">
                  <label class="autologon"></label>
                  <a class="forget-password">忘记密码？</a>
                </div>
                <div class="login-layer-btn" @click="handleLogin">
                  登录
                </div>
              </div>
            </div>
            <!-- 验证码登录 -->
            <div class="login-select" v-else>
              <div class="login-content" style="padding:25px 0 0 0;">
                <div class="form-item username">
                  <input type="tel" autocomplete="off" placeholder="手机号/邮箱/用户名" class="text" maxlength="11" v-model="phone">
                </div>
              </div>
              <!--验证拼图-->
              <div class="login-content" style="padding: 7px 0 15px 0;">
                <div class="geetest_holder geetest_douyufullpage" @click="handleShowImg" :class="isSuccess? 'geetest_radar_success' : 'geetest_wait_compute'"
                  style="width: 290px;">
                  <div class="geetest_form"><input type="hidden" name="geetest_challenge"><input type="hidden" name="geetest_validate"><input
                      type="hidden" name="geetest_seccode"></div>
                  <div class="geetest_btn">
                    <div class="geetest_radar_btn">
                      <div class="geetest_radar">
                        <div class="geetest_ring">
                          <div class="geetest_small"></div>
                        </div>
                        <div class="geetest_sector" style="transform: rotate(88.1842deg);">
                          <div class="geetest_small"></div>
                        </div>
                        <div class="geetest_dot"></div>
                      </div>
                      <div class="geetest_radar_tip" tabindex="0" aria-label="点击按钮进行验证" style="outline-width: 0px;">
                        <span class="geetest_radar_tip_content">点击按钮进行验证</span>
                      </div><a class="geetest_logo" target="_blank" href="http://www.geetest.com/first_page"></a>
                    </div>
                    <div class="geetest_ghost_success" :class="{'geetest_success_animate': isSuccess}">
                      <div class="geetest_success_btn">
                        <div class="geetest_success_box">
                          <div class="geetest_success_show">
                            <div class="geetest_success_pie"></div>
                            <div class="geetest_success_filter"></div>
                            <div class="geetest_success_mask"></div>
                          </div>
                          <div class="geetest_success_correct">
                            <div class="geetest_success_icon"></div>
                          </div>
                        </div>
                        <div class="geetest_success_radar_tip"><span class="geetest_success_radar_tip_content">验证成功</span><span
                            class="geetest_success_radar_tip_timeinfo"></span></div><a class="geetest_success_logo"
                          target="_blank" href="http://www.geetest.com/first_page"></a>
                      </div>
                    </div>
                  </div>

                </div>
                <!---->
                <!--dddd -->
              </div>
              <!--验证拼图-->
              <div class="login-content mobileLogin-content" style="padding: 7px 0 15px 0;">
                <div class="form-item phone-number">
                  <input type="tel" maxlength='4' autocomplete="off" placeholder="短信验证码" class="text" v-model="code">
                  <GetCode :status.sync="status" @handleGetCode="status=false" :phone="phone" :ChangeType='2'></GetCode>
                </div>
                <div class="login-layer-btn" @click="handleLoginCode">
                  登录
                </div>

              </div>
            </div>
          </div>
        </div>
      </form>
      <Vcode :show="isShow" @onSuccess="onSuccess" @onClose="onClose" />
    </div>
    <Foot></Foot>
  </div>
</template>
<script>
  import Foot from '@/components/footer';
  import Vcode from "vue-puzzle-vcode";
  import GetCode from '@/components/getCode'
  import * as API from '@/api/index';
  import {
    setTimeout
  } from 'timers';
  export default {
    name: 'login',
    data() {
      return {
        name: '', //账号密码登录的手机号码
        phone: '', //验证码登录的手机号码
        pwd: '',
        code: '',
        status: true,
        isStatus: 1, //切换状态 
        isShow: false, // 验证码模态框是否出现
        isSuccess: false //拼图是否验证成功
      }
    },
    methods: {
      handleShowImg() {
        this.isShow = true;
      },
      onSuccess(msg) {
        this.isSuccess = true;
        this.isShow = false; // 通过验证后，需要自行隐藏模态框
      },
      // 用户点击遮罩层，应该关闭模态框
      onClose() {
        this.isShow = false;
      },
      async handleLogin() { //账号密码登录
        let name = await this.name.length > 2 ? true : this.$notify.error({
          title: '错误',
          message: '请输入用户名或者手机号码'
        });
        let pwd = await this.pwd.length >= 6 ? true : this.$notify.error({
          title: '错误',
          message: '请输入6-20位的密码'
        });
        if (this.name.length > 2 && this.pwd.length >= 6) {
          const data = {
            service: 'Pro.User.UserLogin',
            phone: this.name,
            password: this.pwd
          }
          const res = await API.toIndex(data);
          if (res.ret == 200) {
            localStorage.setItem('userInfo', JSON.stringify(res.data))
            this.$notify({
              title: '登录成功',
              message: res.msg,
              type: 'success'
            });
            setTimeout(() => {
              this.$router.push('/')
               location.reload()
            }, 500)
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            });
          }
        }
      },
      async handleLoginCode() { //验证码登录
        let name = await this.phone.length >= 11 ? true : this.$notify.error({
          title: '错误',
          message: '请输入11位的手机号码'
        });
        let pwd = await this.code.length >= 4 ? true : this.$notify.error({
          title: '错误',
          message: '请输入4位的验证码'
        });
        let Success = await this.isSuccess ? true : this.$notify.error({
          title: '错误',
          message: '拼图验证失败'
        });
        if (this.phone.length >= 11 && this.code.length >= 4 && this.isSuccess) {
          const data = {
            service: 'Pro.User.PhoneLogin',
            phone: this.phone,
            code: this.code
          }
          const res = await API.toIndex(data);
          if (res.ret == 200) {
            await localStorage.setItem('userInfo', JSON.stringify(res.data))
            const token = await this.$store.dispatch('saveUserInfo', {
                    token: res.data.token
                  });
            this.$notify({
              title: '登录成功',
              message: res.msg,
              type: 'success'
            });
            setTimeout(() => {
              this.$router.push('/')
              location.reload()
            }, 500)
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            });
          }
        }
      },
    },
    components: {
      GetCode,
      Vcode,
      Foot
    }
  }

</script>
<style lang="css" scoped>
  @import '../../scss/geetest.css';

  .login .wrapper {
    width: 990px !important;
    margin: 100px auto;
    flex:1;
  }

  input:focus {
    outline: none;
  }

  .login-layer-btn,
  .login-wrong-tips,
  .case-tips .ico {
    background: url(https://login.zol.com/image/bg.png) no-repeat;
  }


  /* header */
  .header {
    padding: 20px 0;
  }

  .logo {
    float: left;
  }


  /* login-wrap*/
  .login-wrap {
    margin: 30px 0 0;
    border: 1px solid #e6e6e6;
    background: #fff;
    display: flex;
    width: 100%;
  }

  .login-wrap .ad-div {
    float: left;
  }

  .login-wrap .ad-div img {
    display: block;
  }

  .login-layer {
    float: right;
    margin: 0 0 42px;
    padding: 0 0 0 83px;
    width: 290px;
  }

  .login-head {
    position: relative;
    zoom: 1;
    padding: 20px 0 0;
    border-bottom: 2px solid #e6e6e6;
    display: flex;
  }

  .login-head h3 {
    display: block;
    width: 50%;
    float: left;
    height: 35px;
    overflow: hidden;
    font: 18px/35px "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1";
    color: #666;
    text-align: center;
    margin-bottom: -2px;
    cursor: pointer;
  }

  .login-head h3.curLogin {
    border-bottom: 2px solid #de3030;
    color: #333;
  }



  .form-other {
    padding: 0 0 10px;
    overflow: hidden;
    zoom: 1;
    text-align: right;
  }

  .text-button {
    background-image: linear-gradient(180deg, #ffffff 0%, #F3F3F3 100%);
    cursor: pointer;
    text-align: center;
    line-height: 1.5;
    color: green;
    display: block;
    margin: 0 10px 0 0;
    padding: 8px 5px;
    width: 278px;
    height: 22px;
    border: 1px solid #ccc;
    position: relative;
  }
.login{
  width:100%;
  height:100%;
  display:flex;
      flex-direction: column;
}
</style>
